import { Card } from 'antd';
import React from 'react';
import styles from './DisplayModule.less';
const { Meta } = Card;

type DisplayModuleData = {
  img: string;
  title: string;
  description: string;
};

interface DisplayModuleProps {
  displayModuleData: Array<DisplayModuleData>;
}

const App: React.FC<DisplayModuleProps> = ({ displayModuleData }) => (
  <div className={styles.container}>
    {displayModuleData.map((item, index) => (
      <div className={styles.cardWrapper} key={index}>
        <Card
          hoverable
          className={styles.card}
          cover={
            <img
              alt={`example-${index}`}
              src={item.img}
              className={styles.cardImage}
            />
          }
        >
          <Meta
            title={item.title}
            description={item.description}
            className={styles.meta}
          />
        </Card>
      </div>
    ))}
  </div>
);

export default App;
